<template>
  <div>
    <h3>triggerRef</h3>
    <p>
      强制渲染依赖于一个浅层 ref
      (shallowRef)的数据，这通常在对浅引用的内部值进行深度变更后使用。因为浅引用内部的属性值发生改变，页面是丢失了响应，不会重新渲染。
    </p>
    <p>lists: {{ lists }}</p>
    <button @click="setList">setList</button>
    <p v-show="lists.isshow">我是p标签</p>
  </div>
</template>

<script>
import { shallowRef, shallowReactive, triggerRef } from "vue";
export default {
  name: "Vue3CourseTriggerRefView",
  setup() {
    /*
    const lists = shallowRef({
      isshow: true,
      children: [
        {
          a: 1,
        },
        {
          a: 100,
        },
      ],
    });
    const setList = () => {
      lists.value.isshow = !lists.value.isshow;
      console.log(lists.value);
      triggerRef(lists); // 将 shallowRef 返回的值作为参数，放在 triggerRef 里面，让vue强制根据这个数据，渲染页面。类似于：this.$forceUpdate();
    };
    */
    const lists = shallowReactive({
      isshow: true,
      children: [
        {
          a: 1,
        },
        {
          a: 100,
        },
      ],
    });
    const setList = () => {
      lists.children[0].a = 1000;
      triggerRef(lists); // 无效的操作，triggerRef参数只能是ref类型的，不能是reactive类型的。
    };
    return {
      lists,
      setList,
    };
  },
};
</script>
